<template>
	
	<view>
		<tn-popup
		    v-model="isPopupVisible"
		    width="95%"
			height="90%"
		    open-direction="bottom"
		    @close="close"
		    close-btn>
		    <view class="tn-m-sm tn-p-sm   ">
		        <view class="tn-mb-xl">
		            <tn-title
		                size="lg"
		                :title="(formType == 'create' ? '新增' : '编辑')"
		                mode="hLine"
		                sub-title="VehicleType"
		                assist-color="tn-blue" />
		        </view>
			 <tn-form
			     ref="formRef"
			     :model="formData"
			     label-position="top">
			     <tn-form-item label="所属车场"
			         ><tn-input
			             v-model="formData.parkingLotName"
			             disabled></tn-input
			     ></tn-form-item>
			     <tn-form-item label="车库名称"><tn-input v-model="formData.carPlate"></tn-input></tn-form-item>
			     <tn-form-item
			         label="车库类型"
			         prop="billingMethod">
			         <tn-bubble-box
			             :options="Dict.dict.COUPON_UNITS"
			             position="bottom"
			             @click="confirmBubble(Dict.dict.COUPON_UNITS, 'couponType', $event)">
			             <tn-input
			                 style="pointer-events: none"
			                 :model-value="Dict.label.COUPON_TYPE[formData.couponType]"
			                 placeholder="请选择车库类型" />
			         </tn-bubble-box>
			     </tn-form-item>
			     <tn-form-item
			         label="所属车库"
			         prop="carType">
			         <tn-bubble-box
			             :options="Dict.dict.COUPON_UNITS"
			             position="bottom"
			             @click="confirmBubble(Dict.dict.COUPON_UNITS, 'couponUnits', $event)">
			             <tn-input
			                 style="pointer-events: none"
			                 :model-value="Dict.label.COUPON_UNITS[formData.couponUnits]"
			                 placeholder="请选择所属车库" />
			         </tn-bubble-box>
			     </tn-form-item>
			     <tn-form-item label="总车位"><tn-input v-model="formData.remark"></tn-input></tn-form-item>
			     <tn-form-item label="空车位"><tn-input v-model="formData.remark"></tn-input></tn-form-item>
			     <tn-form-item label="备注"><tn-input v-model="formData.remark"></tn-input></tn-form-item>
			     <view class="tn-flex justify-between">
			 		
			 		<tn-button
			 		    :shadow="true"
			 		    shadow-color="tn-grey"
			 		    size="lg"
					@click="close"
			 		    width="80%"
			 		    bg-color="tn-gray">
			 		    取消
			 		</tn-button>
			 		<tn-button
			 		    :shadow="true"
			 		    shadow-color="tn-grey"
			 		    @click="confirm"
			 		    size="lg"
			 		    width="80%"
			 		    bg-color="tn-blue">
			 		    确认
			 		</tn-button>
			 	 </view>
			 			 
			 </tn-form> 
				    </view> 
		</tn-popup>
		
		 			
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import cfsheep from "@/cfsheep";
	/** 页面初始化配置  */
	
	/* 1.字典数据 使用方式：【Dict.dict.字典名称】   为字典数据  【Dict.lable.字典名称[值]】 为获取字典文本 */
	const Dict = cfsheep.$store('dict');
	
	 /* 2.表单配置处理-背景样式处理 */
	const customStyleInput = ref({ backgroundColor: "#ededed75" });
	const customStyleBorder = ref(false);
	/* 3.字典选择器使用  <tn-picker v-model:open="openPickerVisible" :data="pickerData" @confirm="confirmPicker" @close="closePicker" />*/
		
	// 字典处理-选择器key
	const pickerKey = ref('');
	// 字典处理-选择器数据
	const pickerData = ref([]);
	
	// 字典处理-控制选择器的可见性
	const openPickerVisible = ref(false);
	
	// 字典处理-打开选择器
	const openPicker = (type:string,dict:any) => {
        pickerKey.value = type;
        pickerData.value = dict;
		openPickerVisible.value = true; // 显示选择器
	};
	
	// 字典处理-关闭选择器
	const closePicker = () => {
		openPickerVisible.value = false; // 隐藏选择器
	};
	
	// 字典处理-确认选择器的选择
	const confirmPicker = (value) => {
		formData.value[pickerKey.value] = value;
		closePicker(); // 关闭选择器
	}; 
	/* ====================== END ====================== */
	
	/* 4.表单气泡选择框使用     <tn-bubble-box :options="Dict.dict.Dict.dict.COUPON_TYPE" position="top" @click="confirmBubble(Dict.dict.Dict.dict.COUPON_TYPE, 'couponType', $event)" />*/
		// 确认选择器的选择
		const confirmBubble = (dict, labelKey, value) => {
			console.log("confirmBubble=>", labelKey);
			console.log("confirmBubble1=>", dict[value].value);
			formData.value[labelKey] = dict[value].value;
		};
	/* ====================== END ====================== */
	 
		
		/* ====================== 弹框页面标准处理 START====================== */
		// init formData
		// 表单数据模型
		const formData = ref({
		    parkingLotName: null,
		    couponType: "",
		    couponUnits: "",
		    ownerPhone: "",
		    address: "",
		});
		
		// 数据主键
		const pkId = ref(); 		
		// 显示控制器
		const isPopupVisible = ref(false);  
		// 表单的类型：create - 新增；update - 修改
		const formType = ref(""); 
		 // 表单 Ref
		const formRef = ref(); 
		
		// 打开弹窗
		const open = async (type: string, id?: number) => {
		    isPopupVisible.value = true; 
		    formType.value = type;
		  
		    // 修改时，设置数据
		    if (id) {
				// 设置修改主键
				pkId.value = id
		        try {
					// getDeatilById 获取formData 数据 
					DemoAPi.value.getDetailById(id)
					
		        } catch {}
		    }
		};
		// 关闭弹窗
		const close= () => {
			isPopupVisible.value = false;
		}; 
		// 确认事件
		const confirm=()=>{}
		
		defineExpose({ open }); // 提供 open 方法，用于打开弹窗
		 
		/* ====================== END ====================== */
</script>

<style>
</style>